import echarts from "echarts";
import './world'
import  {nameMap}  from "./nameMap";
import {dataMap} from './dataMap'

 
//   左一数据
  export function left1(data) {
    let xArr = []
    let yArr = []
    data.countryAddConfirmRankList.forEach(item => {
      xArr.push(item.nation)
      yArr.push(item.addConfirm)
    })
    let optionleft1 = {
    //   title: {
    //     x: 'center',
    //     y: '4%',
    //     textStyle: {
    //       color: '#fff',
    //       fontWeight: 200,
    //     }
    //   },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "15%",
        right: "15%",
        left: "15%",
        bottom: "15%"
      },
      xAxis: [
        {
          type: "category",
          data: xArr,
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#e2e9ff",
            textStyle: {
              fontSize: 14,
            },
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            formatter: "{value}",
            color: "#e2e9ff",
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: yArr,
          barWidth: "10px",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,244,255,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,77,167,1)", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: "rgba(0,160,221,1)",
              shadowBlur: 4,
            },
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 80,
              height: 30,
              backgroundColor: "rgba(0,160,221,0.1)",
              borderRadius: 150,
              position: ["-8", "-60"],
              distance: 1,
            //   formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(","),
            //   rich: {
            //     d: {
            //       color: "#3CDDCF",
            //     },
            //     a: {
            //       color: "#fff",
            //       align: "center",
            //     },
            //     b: {
            //       width: 1,
            //       height: 30,
            //       borderWidth: 1,
            //       borderColor: "#234e6c",
            //       align: "left",
            //     },
            //   },
            },
          },
        },
      ],
    }
    let left1 = document.querySelector(".left1");
    let echartsleft1 = echarts.init(left1);
    echartsleft1.setOption(optionleft1);
  
    window.addEventListener(
      "resize",
      () => {
        echartsleft1.resize();
      },
      false
    )
  }
//  左二数据
  export function left2(data) {
    let xArr =[]
    let name =[]
    data.continentStatis.forEach(item => {
       xArr.push(item.date)
       name.push(item.nowConfirm)
    })
    // console.log(xArr);
    
     console.log(data.continentStatis);
     let optionsleft2 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
                        type: "shadow",
                        textStyle: {
                            color: "#fff"
                        }
            
                    },
      },
      legend: {
        data: ['亚洲', '北美洲', '大洋洲', '欧洲', '其他'],
        top: '15%',
        textStyle: {
          color: '#90979c'
        }
      },
      grid: {
        top: '30%',
        left: '10%',
        right: '10%',
        bottom: '5%',
        containLabel: true
      },
      // toolbox: {
      //   color: '#fff',
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      xAxis: {
    
        type: 'category',
        boundaryGap: false,
        data: xArr
      },
      yAxis: {
        type: 'value',
    
      },
      series: [
    
        {
          name: '亚洲',
          type: 'line',
          stack: '总量',
          data: name,
    
        },
        {
          name: '北美洲',
          type: 'line',
          stack: '总量',
          data: name
        },
        {
          name: '大洋洲',
          type: 'line',
          stack: '总量',
          data: name
        },
        {
          name: '欧洲',
          type: 'line',
          stack: '总量',
          data: name
        },
        {
          name: '其他',
          type: 'line',
          stack: '总量',
          data: name
        }
      ]
    }
    let left2 = document.querySelector(".left2")
    let echartsleft2 = echarts.init(left2);
    echartsleft2.setOption(optionsleft2);
    window.addEventListener('resize', () => {
      echartsleft2.resize()
    }, false)
  }
// 左三数据
  export function left3(data) { 
    // 左三 
   let optionsleft3 = {
  tooltip: {
    // trigger: 'item'
  },
  legend: {
    // bottom: '5%',
    left: '20%'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      label: {
        // show: false,
        // position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          // fontWeight: 'bold'
        }
      },
      data: [
        // { value: 1048, name: 'Search Engine' },
        // { value: 735, name: 'Direct' },
        // { value: 580, name: 'Email' },
        { value: 1869610, name: '欧洲' },
        { value: 19210166, name: '北美洲' }
      ]
    }
  ]
    }
    let left3 = document.querySelector(".left3")
    let echartsleft3 = echarts.init(left3);
    echartsleft3.setOption(optionsleft3);
    window.addEventListener(
      "resize",
      () => {
        echartsleft3.resize();
      },
      false
    )
  }
//   右一数据
  export function rigth1(data) {
    var data = [77.7, 88.1, 92.6, 0.4, 13.3]
var titlename = ['美国', '西班牙', '哥伦比亚', '英国', '意大利'];
var valdata = [683, 234, 234, 523, 345]
var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];

 let optionsrigth1 = {
      grid: {
        top: "15%",
        right: "10%",
        left: "20%",
        bottom: "10%"
      },
      xAxis: {
        show: false
      },
      yAxis: [{
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          rich: {
            lg: {
              color: '#fff',
              borderRadius: 15,
              align: 'center',
              width: 15,
              height: 15
            },
          }
        },
    
    
      }, {
        show: true,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
    
      }],
      series: [{
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 20,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            },
          }
        },
        label: {
          normal: {
            show: true,
            position: 'inside',
            formatter: '{c}%'
          }
        },
      }, {
        name: '框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [100, 100, 100, 100, 100],
        barWidth: 25,
        itemStyle: {
          normal: {
            color: 'none',
            borderColor: '#00c1de',
            borderWidth: 3,
            barBorderRadius: 15,
          }
        }
      },]
    }
 let rigth1 = document.querySelector('.rigth1')
    let echartsrigth1 = echarts.init(rigth1)
    echartsrigth1.setOption(optionsrigth1)
    window.addEventListener(
      "resize",
      () => {
        echartsrigth1.resize();
      },
      false
    )
  }

//   右二数据
  export function rigth2(data){


  var charts = {
    names: ['死亡人数', '治愈人数'],
    lineX: ['2018-11-11 17:01', '2018-11-11 17:02', '2018-11-11 17:03', '2018-11-11 17:04', '2018-11-11 17:05', '2018-11-11 17:06', '2018-11-11 17:07', '2018-11-11 17:08', '2018-11-11 17:09', '2018-11-11 17:10', '2018-11-11 17:11', '2018-11-11 17:12', '2018-11-11 17:13', '2018-11-11 17:14', '2018-11-11 17:15', '2018-11-11 17:16', '2018-11-11 17:17', '2018-11-11 17:18', '2018-11-11 17:19', '2018-11-11 17:20'],
    value: [
        [451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165, 236, 527, 328, 129, 530],
    ]

}
var color = ['rgba(23, 255, 243']
var lineY = []

for (var i = 0; i < charts.names.length; i++) {
    var x = i
    if (x > color.length - 1) {
        x = color.length - 1
    }
    var data = {
        name: charts.names[i],
        type: 'line',
        color: color[x] + ')',
        smooth: true,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: color[x] + ', 0.3)'
                }, {
                    offset: 0.8,
                    color: color[x] + ', 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        symbol: 'circle',
        symbolSize: 5,
        data: charts.value[i]
    }
    lineY.push(data)
}

lineY[0].markLine = {
    silent: true,
    data: [{
        yAxis: 5
    }, {
        yAxis: 100
    }, {
        yAxis: 200
    }, {
        yAxis: 300
    }, {
        yAxis: 400
    }]
}
let optionsrigth2 = {
    // backgroundColor:'#1b2735',
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: charts.names,
        textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
        },
        right: '4%'
    },
    grid: {
        top: '14%',
        left: '4%',
        right: '4%',
        bottom: '12%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: charts.lineX,
        axisLabel: {
            textStyle: {
                color: 'rgb(0,253,255,0.6)'
            },
            formatter: function(params) {
                return params.split(' ')[0] + '\n' + params.split(' ')[1]
            }
        }
    },
    yAxis: {
        name: charts.unit,
        type: 'value',
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: 'rgb(0,253,255,0.6)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgb(23,255,243,0.3)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgb(0,253,255,0.6)'
            }
        }
    },
    series: lineY
}
// setInterval(() => {
//     myChart.setOption({
//       legend: {
//         selected: {
//           '出口': false,
//           '入口': false
//         }
//       }
//     })
//     myChart.setOption({
//       legend: {
//         selected: {
//           '出口': true,
//           '入口': true
//         }
//       }
//     })
// },10000)
  let right =document.querySelector('.rigth2')
  let echartsrigth2 =echarts.init(right)
    echartsrigth2.setOption(optionsrigth2)
    window.addEventListener(
      "resize",
      () => {
        echartsrigth2.resize();
      },
      false)
}

// 右三数据
export function rigth3(data){
  let  option ={

      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        // top: 'bottom',
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      series: [
        {
          name: 'Radius Mode',
          type: 'pie',
          radius: [20, 140],
          // center: ['25%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 2
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: [
            { value: 800, name: '上海' },
            { value: 669, name: '广东' },
            { value: 389, name: '黑龙江' },
            { value: 303, name: '四川' },
            { value: 276, name: '陕西' },
            { value: 261, name: '内蒙古' },
            { value: 222, name: '福建' },
            { value: 205, name: '北京' },
            { value: 169, name: '天津' },
            { value: 91, name: '山西' }
          ]
        },
        // {
        //   name: 'Area Mode',
        //   type: 'pie',
        //   radius: [20, 140],
        //   center: ['25%', '50%'],
        //   roseType: 'area',
        //   itemStyle: {
        //     borderRadius: 2
        //   },
        //   data: [
        //     { value: 30, name: 'rose 1' },
        //     { value: 28, name: 'rose 2' },
        //     { value: 26, name: 'rose 3' },
        //     { value: 24, name: 'rose 4' },
        //     { value: 22, name: 'rose 5' },
        //     { value: 20, name: 'rose 6' },
        //     { value: 18, name: 'rose 7' },
        //     { value: 16, name: 'rose 8' }
        //   ]
        // }
      ]
    }
  let rigth3= document.querySelector('.rigth3')
  // 初始化
  let changebox1=echarts.init(rigth3)
  // console.log(changebox1,123);
  // 设置数据
  changebox1.setOption(option)
  // 监听
  window.addEventListener(
    "resize",
    () => {
      changebox1.resize();
    },
    false
  )

}  

  //地图
  export function centermap() {
    // console.log(dataMap);
     //中间  地图数据
     let opacitycenter = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var value = (params.value + '').split('.');
            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
              + '.' + value[1];
            return params.seriesName + '<br/>' + params.name + ' : ' + value;
          }
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            { max: 0, label: "0", color: "#eee" },
            { min: 1, max: 499, label: "1-499", color: "#fff7ba" },
            { min: 500, max: 4999, label: "500-4999", color: "#ffc24b" },
            { min: 5000, max: 9999, label: "5000-9999", color: "#ff7c20" },
            { min: 10000, max: 100000, label: "1万-10万", color: "#fe5e3b" },
            { min: 100000, max: 500000, label: "10万-50万", color: "#e2482b" },
            { min: 500000, label: "50万以上", color: "#b93e26" },
          ],
          itemHeight: 10,
          itemWidth: 10,
          inverse: true,
          bottom: "20%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: 'World Population (2010)',
            type: 'map',
            mapType: 'world',
            // roam: true,
            itemStyle: {
              emphasis: { label: { show: true } }
            },
            data: dataMap,
            nameMap: nameMap
          }
        ]
      }
//   let opacitycenter= {
//   tooltip: {
//       trigger: 'item',
//       formatter: function (params) {
//           var value = (params.value + '').split('.');
//           value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
//                   + '.' + value[1];
//           return params.seriesName + '<br/>' + params.name + ' : ' + value;
//       }
//   },
//   grid: {
//         top: "15%",
//         right: "15%",
//         // left: "15%",
//         bottom: "15%"
//       },
//   visualMap: {
//                  min: 0,
//                 max: 1000000,
//                 // color: '#fff',
//                 textStyle: {
//                         color: '#fff',
//                     },
//                 left: 10,
//                 bottom: 10,
//                 showLabel: !0,
//                 // text: ["高", "低"],
//                 pieces: [{
//                     gt: 500000,
//                     label: "50万以上",
//                     color: "#b93e26"
//                 }, {
//                     gte: 100000,
//                     lt: 500000,
//                     label: "10万-50万",
//                     color: "#e2482b"
//                 }, {
//                     gt: 10000,
//                     lt: 100000,
//                     label: "1万-10万",
//                     color: "#fe5e3b"
//                 },{
//                     gt:5000,
//                     lt:9999,
//                     label:"5000-9999",
//                     color:"#ff7c20"
//                 },
//                 {
//                     gt:500,
//                     lt:4999,
//                     label:"500-4999",
//                     color:"#ffc24b"
//                 },
//                 {
//                    gt:1,
//                    lt:499,
//                    label:"1-499",
//                    color:"#fff7ba"
//                 },
//                  {
//                     value: 0,
//                     color: "#ffffff"
//                 }],
//                 show: !0
//                 // min: 0,
//                 // max: 1000000,
//                 // text:['High','Low'],
//                 // realtime: false,
//                 // calculable: true,
//                 // color: ['orangered','yellow','lightskyblue']
//             },
//   series: [
//       {
//           name: 'World Population (2010)',
//           type: 'map',
//           mapType: 'world',
//           itemStyle:{
//               emphasis:{label:{show:true}}
//           },
//           data:dataMap,
//           nameMap:nameMap
//       }
//   ]
// }
    // console.log(dataMap,800);
    let WorldMap = document.querySelector('.WorldMap')
    let echartsmap = echarts.init(WorldMap)
    echartsmap.setOption(opacitycenter)
    window.addEventListener(
      "resize",
      () => {
        echartsmap.resize();
      },
      false
    )
    
  }




